import React, { useState, useEffect } from 'react';
import { NavBar, Radio, Button, CheckList, TextArea, Toast } from 'antd-mobile';
import { LeftOutline, AddOutline } from 'antd-mobile-icons';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import '../styles/bookingPatient.scss';

// 患者信息接口
interface Patient {
    id: string;
    name: string;
    age: number;
    gender: '男' | '女';
    relation: string;
    isDefault?: boolean;
}

const BookingPatientPage: React.FC = () => {
    const navigate = useNavigate();
    const { doctorId } = useParams<{ doctorId: string }>();
    const location = useLocation();

    // 解析URL参数中的日期和时间
    const queryParams = new URLSearchParams(location.search);
    const selectedDate = queryParams.get('date') || '';
    const selectedTime = queryParams.get('time') || '';

    // 患者列表
    const [patients] = useState<Patient[]>([
        { id: '1', name: '张三', age: 35, gender: '男', relation: '本人', isDefault: true },
        { id: '2', name: '张大山', age: 65, gender: '男', relation: '父亲' }
    ]);

    // 选中的患者、是否添加新患者、病情描述
    const [selectedPatient, setSelectedPatient] = useState<string>(patients[0].id);
    const [addNewPatient, setAddNewPatient] = useState<boolean>(false);
    const [diseaseDescription, setDiseaseDescription] = useState<string>('');

    // 模拟医生数据
    const doctor = {
        id: doctorId || '1',
        name: '张医生',
        title: '主任医师',
        department: '心内科',
        hospital: '协和医院',
        fee: 150
    };

    const handleBack = () => {
        navigate(`/booking/${doctorId}`);
    };

    const handlePatientSelect = (patientId: string) => {
        setSelectedPatient(patientId);
        setAddNewPatient(false);
    };

    const handleAddPatient = () => {
        Toast.show('点击了添加就诊人按钮');
        return;
    };

    const handleSubmit = () => {
        if (!selectedPatient) {
            Toast.show({
                icon: 'fail',
                content: '请选择就诊人',
            });
            return;
        }

        if (!diseaseDescription.trim()) {
            Toast.show({
                icon: 'fail',
                content: '请填写病情描述',
            });
            return;
        }

        // 获取医生信息，优先使用location.state中的数据，如果没有则使用本地定义的数据
        const doctorInfo = location.state?.doctor || doctor;

        // 获取日期时间信息，优先使用location.state中的数据
        const dateInfo = location.state?.selectedDate || {
            day: '周四',
            date: selectedDate || '2023-07-20'
        };

        const timeInfo = location.state?.selectedTime || selectedTime || '10:00';

        // 获取选择的患者信息
        const patientInfo = patients.find(p => p.id === selectedPatient);

        // 跳转到确认订单页面
        navigate('/confirm-order', {
            state: {
                doctor: doctorInfo,
                selectedDate: dateInfo,
                selectedTime: timeInfo,
                selectedPatient: patientInfo,
                diseaseDesc: diseaseDescription
            }
        });
    };

    return (
        <div className="booking-patient-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                backArrow={<LeftOutline />}
                onBack={handleBack}
            >
                预约挂号
            </NavBar>

            {/* 选择时间段展示 */}
            <div className="selected-time-info">
                <div className="time-info-content">
                    <div className="time-info-title">
                        {selectedDate} {selectedTime}
                    </div>
                    <div className="time-info-desc">
                        剩余3个号
                    </div>
                </div>
            </div>

            {/* 选择就诊人 */}
            <div className="patient-section">
                <h3 className="section-title">选择就诊人</h3>
                <div className="patient-list">
                    <Radio.Group
                        value={selectedPatient}
                        onChange={(val) => handlePatientSelect(val as string)}
                    >
                        {patients.map(patient => (
                            <div className="patient-item" key={patient.id}>
                                <Radio value={patient.id} className="patient-radio">
                                    <div className="patient-info">
                                        <div className="patient-name">
                                            {patient.name}
                                            {patient.isDefault && <span className="default-tag">默认</span>}
                                        </div>
                                        <div className="patient-detail">
                                            {patient.age}岁 | {patient.gender}
                                        </div>
                                    </div>
                                </Radio>
                            </div>
                        ))}
                    </Radio.Group>

                    <div className="add-patient" onClick={handleAddPatient}>
                        <AddOutline className="add-icon" />
                        <span>添加就诊人</span>
                    </div>
                </div>
            </div>

            {/* 病情描述 */}
            <div className="disease-section">
                <h3 className="section-title">病情描述（选填）</h3>
                <div className="textarea-container">
                    <TextArea
                        placeholder="请简要描述您的症状和病情，便于医生提前了解"
                        value={diseaseDescription}
                        onChange={setDiseaseDescription}
                        autoSize={{ minRows: 3, maxRows: 5 }}
                        className="disease-textarea"
                    />
                </div>
            </div>

            {/* 底部操作栏 */}
            <div className="booking-footer">
                <div className="fee-info">
                    <span className="fee-label">¥ {doctor.fee}</span>
                </div>
                <Button
                    className="confirm-button"
                    color="primary"
                    onClick={handleSubmit}
                >
                    确认预约
                </Button>
            </div>
        </div>
    );
};

export default BookingPatientPage; 